<template>
	<div class="pt-2 px-3 pb-6 text-t-1">
		<div class="flex items-center" :style="{ opacity: betslipStore.successList.length ? 1 : 0.1 }">
			<base-icon name="correct2" class="text-success text-[16px] -ml-[3px]"></base-icon>
			<div class="ml-1">{{ $t('betslip.successList') }}</div>
		</div>
		<transition-group
			tag="div"
			enter-active-class="animate__animated animate__fadeInDown"
			leave-active-class="animate__animated animate__fadeOutDown">
			<betslip-success-item v-for="(item, index) in listData" :key="index" :data="item" />
		</transition-group>
		<transition
			enter-active-class="animate__animated animate__bounceIn"
			leave-active-class="animate__animated animate__bounceOut">
			<div
				v-if="betslipStore.successList.length"
				class="mt-2 px-2 py-1 flex items-center w-[80%] mx-auto rounded bg-bg-3"
				style="animation-delay: 300ms">
				<base-icon name="lamp" class="text-[16px] text-warning"></base-icon>
				<span class="ml-1 text-sm">
					{{ $t('betslip.description', [bettingConfigStore.reasonMinChars]) }}
				</span>
			</div>
		</transition>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import BetslipSuccessItem from './betslip-success-item.vue'
import { useBetslipStore, useBettingConfigStore } from '@/store'
import { computed } from 'vue'

const betslipStore = useBetslipStore()
const bettingConfigStore = useBettingConfigStore()

const listData = computed(() => {
	const list: any[] = [...betslipStore.successList]
	while (list.length < 3) {
		list.push(null)
	}
	return list
})
</script>
